@property --s-gradient-dynamic-border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes s-gradient-dynamic-border-rotate {
  0% {
    --s-gradient-dynamic-border-angle: 0deg;
  }
  100% {
    --s-gradient-dynamic-border-angle: 360deg;
  }
}

.s-gradient-dynamic-border {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: var(--border-width);
  border-radius: var(--border-radius);

  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius);
  }

  .s-gradient-dynamic-border__content {
    z-index: 1;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius);
  }
}

.s-gradient-dynamic-border--border-color-default,
.s-gradient-dynamic-border--border-color-default--hover:hover {
  &::before,
  &::after {
    background-image: conic-gradient(
        from var(--s-gradient-dynamic-border-angle),
        var(--border-color-list) 360deg,
        transparent 360deg
    );
  }
}

.s-gradient-dynamic-border--border-color-custom,
.s-gradient-dynamic-border--border-color-custom--hover:hover {
  &::before,
  &::after {
    background-image: var(--border-color);
  }
}

.s-gradient-dynamic-border--shine,
.s-gradient-dynamic-border--shine--hover:hover {
  &::after {
    filter: blur(var(--shine-range));
    opacity: var(--shine-brightness);
  }
}

.s-gradient-dynamic-border--rotate,
.s-gradient-dynamic-border--rotate--hover:hover {
  &::before,
  &::after {
    animation: s-gradient-dynamic-border-rotate var(--speed) linear infinite;
  }
}

.s-gradient-dynamic-border--hover-pause:hover {
  &::before,
  &::after {
    animation-play-state: paused;
  }
}
